<#include "../../layout/mainLayout.ftl">

<@layout>
    <div class="layui-card">
        <div class="layui-card-header">
            <span class="layui-breadcrumb">
                ${breadcrumb!''}
            </span>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" id="queryForm">
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: auto">事项名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="key" class="layui-input" placeholder="事项名称关键字模糊搜索" style="width:100%; border: 1px solid #ccc;border-radius: 0;">
                    </div>
                    <div>
	                    <button type="button" class="layui-btn" lay-submit="" id="queryPage">查询</button>
	                    <input type="button"  class="layui-btn , btn" value="高级检索">
	                    <button type="button" style="float:right;" class="layui-btn" id="newItem"><i class="layui-icon">&#xe608;</i>新建</button>
	                    <button type="button" style="float:right;" class="layui-btn layui-btn-danger layui-btn-disabled" id="delItems" disabled><i class="layui-icon">&#xe640;</i>删除</button>    
					</div>
				<br/>
                    <div class="mt20 content" style="color:gray;margin-top:10px; display:none">
                    <label class="layui-form-label" style="width: auto">是否进驻市民之家</label>
                    <div class="layui-input-inline">
                        <select name="publicServiceFlag">
	                           <option value="">全部</option>
					           <option value="1">是</option>
					           <option value="2">否</option>					           
                        </select>
                    </div>
                    <div class="layui-input-inline" style="display:none">
                        <select name="state">
					           <option value="1" checked>否</option>
					           <option value="2">是</option>					           
                        </select>
                    </div>
                    <label class="layui-form-label" style="width: auto" >创建日期</label>
                    <div class="layui-input-inline"  style="width:100px">
                        <input type="text" name="createTime" id="createTime" class="layui-input" autocomplete="off" placeholder="请选择时间">
                    </div>
             
                    <label class="layui-form-label" style="width: auto">至</label>
                    <div class="layui-input-inline" style="width:100px">
                        <input type="text" name="createTimeRange" id="createTimeRange" class="layui-input" autocomplete="off" placeholder="请选择时间">
                    </div>              
    			</div>
              </div>
            </form>
            <table id="dataTable" lay-filter="dataTable"></table>
        </div>
    </div>
</@layout>
<@js>
    <script>
        layui.use(['laydate', 'table', 'layer', 'global'], function () {
            var table = layui.table, layer = layui.layer, $ = layui.$, laydate = layui.laydate;
            //起始时间插件
            laydate.render({
                elem: '#createTime',
                type: 'date'
            });
            //结束时间插件
            laydate.render({
                elem: '#createTimeRange',
                type: 'date',
                //range: true
            });                        
            
            var dataTable = table.render({
                elem: '#dataTable',
                url: '/tMatter/pageData?state=1', //数据接口
                where: {},
                page: true, //开启分页
                cols: [[ //表头
                    {type: 'checkbox'},
                    {field: 'matterName', title: '事项名称', align: 'center'},
                    {field: 'powerMatterCode', title: '主项编码', align: 'center'},
                    {field: 'matterAttr', title: '事项属性', align: 'center', templet: function(d){
                    	if(d.matterAttr == 1){
                    		return '公共服务'
                    	} if(d.matterAttr == 2){
                    		return '权力事项'
                    	}
                      }
                    },                    
                    {field: 'matterType', title: '事项类型', align: 'center'},                    
                    {field: 'createDate', title: '创建时间', align: 'center'},
                    {field: 'approvalState', title: '审核状态', align: 'center', templet: function(d){
                    	if(d.approvalState == 0){
                    		return '未送审'
                    	} if(d.approvalState == 1){
                    		return '主管部门审核中'
                    	} if(d.approvalState == 2){
                    		return '法制办审核中'
                    	} if(d.approvalState == 3){
                    		return '审管办审核中'
                    	} if(d.approvalState == 4){
                    		return '财政局审核中'
                    	} if(d.approvalState == 5){
                    		return '编委办审核中'
                    	} if(d.approvalState == 6){
                    		return '数据资源局审核中'
                    	} if(d.approvalState == 7){
                    		return '审核通过'
                    	} if(d.approvalState == 8){
                    		return '已驳回'
                    	}
                      }
                    },
                    {
                        title: '操作', toolbar: '<div>' +
                            '<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="detail">送审</a>' +
                            '<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="edit">编辑</a>' +
                            '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>' +
                            '</div>',
                        minWidth: 180
                    }
                ]]
            });
            
            //触发高级检索
            $(function(){
		       $('.btn').click(function(){
		           $('.content').toggle();
		      	 }) 
		    })

            window.reloadTable = function (reset = false) {
                var fields = {};
                $.each($('#queryForm').serializeArray(), function (i, field) {
                    fields[field.name] = field.value;
                });
                dataTable.reload({
                    where: fields,
                    page: reset?{
                        curr: 1 //重新从第 1 页开始
                    }:undefined
                });
            };

            table.on('tool(dataTable)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象
                if (layEvent === 'detail') { //送审
                    $.ajax({
                        url: '/tMatter/detailPage',
                        data: {id: data.id, resId: data.resId},
                        async: false,
                        success: function (data, status, xhr) {
                        	if(data){
                        		alert("送审成功");
                        		 reloadTable();
                        	}else{
                        		alert("已推送给部门审核，请耐心等候");
                        		 reloadTable();
                        	} 
                        }
                    });
                } else if (layEvent === 'del') { //删除
                    layer.confirm('确认删除？', function (index) {
                        $.ajax({
                            url: '/tMatter/delete',
                            data: {id: data.id},
                            async: false,
                            success: function (data, status, xhr) {
                                if (data.success) {
                                    layer.close(index);
                                    reloadTable();
                                }
                            }
                        });
                    });
                } else if (layEvent === 'edit') { //编辑
                    $.ajax({
                        url: '/tMatter/updatePage',
                        data: {id: data.id},
                        async: false,
                        success: function (data2, status, xhr) {
                            window.open('/tMatter/updatePage?id='+data.id,'_self')   
                        }
                    });
                }
            });

            table.on('checkbox(dataTable)', function(obj) {//批量删除
                var checkStatus = table.checkStatus('dataTable') ,data = checkStatus.data;
                if (data.length > 0) {
                    $('#delItems').removeClass('layui-btn-disabled');
                    $('#delItems').removeAttr('disabled');
                } else {
                    $('#delItems').addClass('layui-btn-disabled');
                    $('#delItems').attr('disabled', 'disabled');
                }
            });

            $('#queryPage').click(function () {
                reloadTable(true);
            });
            $('#newItem').click(function () {
                $.ajax({
                    url: '/tMatter/newPage',
                    async: false,
                    success: function (data, status, xhr) {
                         window.open('/tMatter/newPage','_self')
                    }
                });
            });

            $('#delItems').click(function () {
                var checkStatus = table.checkStatus('dataTable'), data = checkStatus.data;
                layer.confirm('确认批量删除？', function (index) {
                    $.ajax({
                        url: '/tMatter/deleteBatch',
                        data: {id: data.map(item => item.id)},
                        async: false,
                        traditional: true,
                        success: function (data, status, xhr) {
                            if (data.success) {
                                layer.close(index);
                                layer.msg('删除成功', {
                                    time:1000
                                });
                                reloadTable();
                            }
                        }
                    })
                });
            });
        });
    </script>
</@js>